<style>
	*{
		padding:0;
		margin:0;
	}
	li{
		list-style-type: none;
	}
	
    .seachDiv{
    	z-index: 10;
    }
    .dd{
    	background-color: white;
    }
	.stationList{
		padding: 12px;
		background-color: #fff;
	}
	.stationList::-webkit-scrollbar{
   		display: none;
	}
	.item{
		margin-bottom: 8px;
		position: relative;
		background: #f8f8f8;
	}
	.item:hover{
		background: rgba(83,146,230,.8);
		color: #fff;
	}
	.item:hover .s_fix_bc{
		border-color: #5392E6;
	}
	.groupUl{
		
	    padding: 2px;
	    margin: 0;
	}

	.stationName,.houseNumber{
		width: 80px;
	}
	.streetName{
		width: 120px;
	}
	.map .btn{
		padding: 6px;
		
	}
	.hideInp{
		display: none;
	}
	.delItem,.delGroup{
	    background-color: #ddd;
	    position: absolute;
	    display: inline-block;
	    line-height: 12px;
	    width: 15px;
	    height: 15px;
	    color: white;
	    cursor: pointer;
	    text-align: center;
	    border-radius: 50%;
	    right: 1px;
	    top: 3px;
	}
	.dd-draghandle .delGroup{
	    border-radius: 0;
	    background-color: #ddd;
	    color: #fff;
		font-weight: normal;
		width: 30px;
		right: 8px;
		top: 8px;
		background-color: transparent;
		color: rgba(26,109,221,1)
	}
	.dd-draghandle{
		margin-left:0;
		margin-top:16px;
	    padding: 4px 0 8px 4px;
    	border: 1px solid #ddd;
	}
	.dd-draghandle:first-of-type{
		margin-top: 0;
	}
	.listTabel{
		position: absolute;
	    left: 30%;
	    top: 20%;
	    width: 680px;
	    z-index: 10;
	    background: #fff;
	    max-height: 602px;
	    overflow-y: auto;
	}
	
    /*----------模态框样式开始-----------*/
    .overLay {
        position: fixed;/*这里的定位方式使用fixed能保证遮罩层百分百的覆盖整个窗口*/
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.3;
        background-color: #000000;
        z-index: 100;
    }
    .alertContent {
        width: 265px;
        background: #ffffff;
        position: absolute;
        top: 200px;
        left: 30%;
        z-index: 110;
    }
	.cancelStreet{
		position: absolute;
	    top: 2px;
	    right: 5px;
	}
	.addStreet{
		width: 50px;
	    margin-left: 10px;
	    background: #fee188;
	}
	.activeItem{
		background: rgba(115,157,252,.8);
		color: #fff;
	}
	.activeItem .s_fix_bc{
		border-color: #999;
	}
	.carTitle{
		font-size: 14px;
		font-weight: bold;
		position: relative;
		margin-bottom: 16px;
	}
	.item input{
		border: 1px solid #f2eded;
		padding: 0 8px;
	}
	.s_fix_bc{
		background-color: transparent;
		margin-left: 4px;
	}
	.s_title{
		padding-top: 4px;
		font-weight: bold;
		font-size: 14px;
	}
	.s_map_input{
		padding: 0 8px;
	}
	.s_map_btn{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	}
	.s_vision{
		overflow-y: auto;
		max-height: 750px;
	}
	.s_footer{
		margin-top: 12px;
	}
	.s_table_btn{
		padding: 8px 4px;
		border: 1px solid #ccc;
	}
	.s_back_btn{
		color: #1A6DDD;
		cursor: pointer;
		position: absolute;
		right: 12px;
		top: 0;
		left: inherit;
		font-weight: normal;
		background-color: transparent;
		border-style: none;
		outline: none;
		border-radius: 0;
		box-shadow: none;
	}
</style>


<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['系统基础管理','车辆管理','站点管理']" icon="fa fa-tag" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div class="row warpDiv">
		<div class="col-xs-12 col-sm-6 col-lg-4 stationList " >
			<h1 class="carTitle">车牌号：{{carNumber}}-站点管理<button class="btn s_back_btn" (click)="goBack()">返回车辆管理>></button></h1>
			<div class="s_vision">
				<div class="dd-draghandle dd" *ngFor="let item of stationlist;let i = index">
					<div class="s_title">第{{i+1}}组 <span class="delGroup" (click)='deleteGroup(i)'>删除</span></div>
					<ul class="groupUl dd-list">
						<li class="item"  [ngClass]="{activeItem: itemChild.id === activeIndex}"  
							*ngFor="let itemChild of stationlist[i];let j = index" 
							(click)='findStation(itemChild.id)'>
							名称:<input type="text" [(ngModel)]="itemChild.name" class="stationName s_fix_bc word_nowrap" (click)='sotpEven($event)'/>
							区域名:<input type="" [(ngModel)]="itemChild.streetName" class="streetName s_fix_bc word_nowrap" (click)='isTableOpen("open")'/>
							户籍数:<input type=""  [(ngModel)]="itemChild.houseNumber" class="houseNumber s_fix_bc word_nowrap"/>
							<input type="" [(ngModel)]="itemChild.longitude" class="hideInp"/>
							<input type="" [(ngModel)]="itemChild.lantitude" class="hideInp"/>
							<span class="delItem"  (click)='deleteItem($event,itemChild.id)'>x</span>
							
						</li>
					</ul>
					
					<button class="btn btn-primary" style="min-width: 72px;" (click)='addStation(i)'>+ 添加</button>
				</div>
			</div>
			<div class="s_footer">
				<button class="btn btn-info btn-xs btn-primary" style="padding: 4px 0;" (click)="addGroup()">新增一组</button>
				<button class="btn btn-info btn-xs postPoint btn-primary" style="padding: 4px 0;" (click)="submitStation()">保存站点</button>
			</div>
		</div>
		<div class="col-xs-12 col-sm-6 col-lg-8 map">	
			<div class="s_map_btn">
				<div class=" seachDiv col-xs-md col-lg-3 ">
					<div id="r-result"  class="input-group">
						<input type="text" id="suggestId"  placeholder='请输入需要搜索的地址' class="col-xs-10 form-control s_map_input word_nowrap" />
						<span class="input-group-btn">
							<button type="button" class="btn btn-primary btn-sm" id="search">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>搜索
							</button>
						</span>
					</div>
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
				</div>
				<div class="col-md-12 col-lg-3 seachPotion" >
					<div class="input-group">
						<input type="text"  placeholder="请输入具体的经纬度" class="col-xs-10 form-control getCoordinate s_map_input" autocomplete="off" [(ngModel)]="searchPointVal">
						<span class="input-group-btn">
							<button type="button" class="btn btn-primary btn-sm sureCoordinate"  (click)="searchPoint()">
								<i class="ace-icon glyphicon glyphicon-map-marker"></i>定位
							</button>
						</span>
					</div>
				</div>
				<div class="form-group col-md-8 col-lg-4 seachTime"><!-- datepicker start -->
					<div class="input-daterange input-group">
						<input type="text" class="form-control s_map_input"  autocomplete="off" id="datetimepicker1" >
						<span class="input-group-addon" style="padding:0 9px;">至</span>
						<input type="text" class="form-control s_map_input"  autocomplete="off" id="datetimepicker2" >
					</div>
				</div><button type="button" class="btn btn-primary btn-sm lookTrack col-md-3 col-lg-1" (click)="drawTrack()">
					<i class="ace-icon glyphicon glyphicon-pencil"></i>轨迹
				</button>
			</div>
			<div id="allmap" style="height: 844px;" class="col-xs-12"></div>
		</div>
		<div class='addStreetView' id="addStreetView" *ngIf="isAddStreet">
			
	    	<div class="overLay"></div>
			<div class="delPrompt row alertContent" style="width: 32%;height: 200px;min-width:355px;">  
				<ul style="margin:0;">
				
				<li style="margin: 10% 0 10px 0;text-align: center;">
			    	{{addStreetTitle}}区域信息
				</li>
				<li class="row" style="margin-bottom: 10px;">
			    	<span class='col-sm-12 col-xs-12 col-md-2' style="text-align: center;">区域名</span>
					<input class="col-xs-12 col-md-8"  [(ngModel)]='addStreetName'/>  
				</li>
				<li  class="row" >
					<span class='col-sm-12 col-xs-12 col-md-2' style="text-align: center;">户籍数</span>
					<input class="col-xs-12 col-md-8"  type='number' [(ngModel)]='addHouseNumber'   min="1" />
			    	
					
					<span class="cancelStreet" (click)='isStreetAppend("close")'>
	
					<i class=" ace-icon fa fa-times"></i></span>  
				 </li>
				 <li class="row" style="margin-top: 10px;text-align: center;">	
				 	<button class="btn btn-minier addStreet" (click)='submitStreet()'>确定</button>  </li>
			     </ul>          
			</div>
		</div>
		<input class="keepCompanyId" hidden  />
		<input class="keepDeviceId" hidden  />
		<div class="listTabel" draggable="true"  *ngIf="isShowTable">
		<div class="clearfix s_table_btn">
			<div class="left top-search">
				<input type="text" [(ngModel)]="searchKey" (change)="table_search(searchKey)" class="search-input" placeholder="请输出需要搜索的区域名...">
				<span class="top-search-box">
			        <button class="top-search-btn" type="button" (click)="table_search(searchKey)"> <i class="fa fa-search"></i></button>
			    </span>
			</div>
			
			<div class="right page-header-btn">
				<button  type="button"  class="btn btn-primary" (click)='isStreetAppend("open")'>添加</button>
				<button  type="button"  class="btn btn-primary" (click)='isTableOpen("close")'> 关闭</button>
				
			</div>
		</div>
		<!--表格头部操作部分end-->
		<!--表格部分-->
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>区域名称</th>
										<th>户籍数</th>
										<th >操作</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData" >
										<td>{{row.streetName}}</td>
										<td>{{row.houseNumber}}</td>
										<td >
											<button type="button" (click)="selectStreet(row)">选择</button>
											<button type="button" (click)="editStreet(row)">修改</button>
											<button type="button" (click)="removeStreet(row)">删除</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount"
						           [rows]="pageSize"
						           [currentPage]="curPage - 1"
						           (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
		<!--表格部分end-->
	</div>
	</div>	
</div>